<template>
 <div >
   <v-touch v-on:swipeleft="onSwipeLeft"  v-on:swiperight="swiperright" class="pay" >
     <van-tabs style="position: sticky;top:0;width:100%;z-index:99" :beforeChange="beforeChange(active)" offset-top="0" title-inactive-color="#ccc" line-width="0" class="btn"  v-model="active" animated >
       <van-tab style="font-size:28px" v-for="(item,index) in list" :title="item.name" :disabled="index==0||index==4" >
         <template #title>
           <van-icon name="search" v-if="index==0" size="26" />
         </template>
       </van-tab>
     </van-tabs>
     <router-view/>
   </v-touch>

   <van-tabbar v-model="active">
     <van-tabbar-item icon="home-o">首页</van-tabbar-item>
     <van-tabbar-item icon="search">消息</van-tabbar-item>
     <van-tabbar-item icon="friends-o">发布</van-tabbar-item>
     <van-tabbar-item icon="friends-o">发布</van-tabbar-item>
     <van-tabbar-item icon="user-o">用户</van-tabbar-item>
   </van-tabbar>
 </div>
</template>

<script>
export default {
  name: "mian",
  data(){
    return{
      active:2,
      list:[
        {
          name:'搜索',
        },
        {
          name:'分类',
          path:'/class'
        },
        {
          name:'校园',
          path:'/about'
        },
        {
          name:'热门',
          path:'/Popular'
        },
        {
          name:'发布',
        },
      ]
    }
  },
  methods:{
    swiperright(){
      if(this.active==1){
        return
      }
        this.beforeChange(this.active--)
    },
    onSwipeLeft(){
      if(this.active==3){
        return
      }
      this.beforeChange(this.active++)
    },
    beforeChange(index){
      this.$router.push({
        path:this.list[index].path
      }).catch(err=>{})
    },
  }
}
</script>

<style scoped lang="scss">
.pay{
  touch-action:pan-y!important;
}

$size:20px;

.btn ::v-deep .van-tabs__wrap{
  height:58px;
}

.btn ::v-deep .van-tab__text--ellipsis{
  overflow:visible;
}

.btn ::v-deep .van-tab{
  font-size:20px;
}

.btn .van-tab:last-child{
  font-size:16px;
}


.btn ::v-deep .van-tab--active{
  font-size:24px;
  font-weight:800;
}

</style>